import React, { memo, useState } from "react";
// import PropTypes from "prop-types";
import EntireFilterWrapper from "./style";
import filterBtns from "@/assets/mock-data/filter-data.json";
import classNames from "classnames";
const EntireFilter = memo(function EntireFilter(props) {
  const [selectedFilter, setSelectedFilter] = useState([]);
  function handleClick(item) {
    const filters = [...selectedFilter];

    if (selectedFilter.includes(item)) {
      const index = selectedFilter.findIndex((i) => i === item);
      filters.splice(index, 1);
    } else {
      filters.push(item);
    }
    setSelectedFilter(filters);
  }
  return (
    <EntireFilterWrapper>
      <div className="filter">
        {filterBtns.map((item) => {
          return (
            <div
              onClick={() => handleClick(item)}
              className={classNames([
                "item",
                { active: selectedFilter.includes(item) },
              ])}
              key={item}
            >
              {item}
            </div>
          );
        })}
      </div>
    </EntireFilterWrapper>
  );
});

// EntireFilter.propTypes = {};

export default EntireFilter;
